<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>数据库动态柱状图</title>
    <!-- 引入 ECharts 库 -->
    <script src="{{ url_for('static', filename='js/echarts.min.js') }}"></script>
    <style>
        #chart {
            width: 800px;
            height: 500px;
            margin: 30px auto;
        }
        h1 {
            text-align: center;
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <h1>数据库数据可视化</h1>
    <div id="chart"></div>

    <script>
        // 初始化图表
        var myChart = echarts.init(document.getElementById('chart'));
        
        // 从Flask模板获取数据
        var chartData = {
            names: {{ chart_data.names|tojson }},
            counts: {{ chart_data.counts|tojson }}
        };
        
        // 配置图表选项
        var option = {
            title: {
                text: '数据库数据柱状图',
                left: 'center'
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            xAxis: {
                type: 'category',
                data: chartData.names,
                axisLabel: {
                    rotate: 30  // 如果名称太长可以旋转30度
                }
            },
            yAxis: {
                type: 'value',
                name: '数量'
            },
            series: [{
                name: '数量',
                type: 'bar',
                data: chartData.counts,
                itemStyle: {
                    color: '#3398DB'
                },
                label: {
                    show: true,
                    position: 'top'
                }
            }]
        };
        
        // 应用配置
        myChart.setOption(option);
        
        // 响应窗口大小变化
        window.addEventListener('resize', function() {
            myChart.resize();
        });
    </script>
</body>
</html>